$bottomColor: #E2E2E1;
$topColor: lighten($bottomColor, 2%);

.browser-window, .terminal-window {
	text-align: left;
	margin: 20px;
	width: 602px;
	height: 355px;
	display: inline-block;
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0px 2px 8px rgba(0,0,0,.1);
	overflow: overlay;
	.top-bar {
		height: 30px;
		border-radius: 4px 4px 0 0;
		border-top: thin solid #ddd;
		border-bottom: thin solid #ddd;
		background: #ddd;
	}
	.circle {
		height: 8px;
		width: 8px;
		display: inline-block;
		border-radius: 50%;
		background-color: lighten($topColor, 10%);
	}
	.circles { margin: 1px 10px; }
	.window-content {
		margin: 0;
		width: 100%;
		min-height: 90%;
		display: inline-block;
		border-radius: 0 0 4px 4px;
	}

	.circle-red.circle {
		background-color:$color__red;
	}
	.circle-yellow.circle {
		background-color:$color__yellow;
	}
	.circle-green.circle {
		background-color:$color__green;
	}
}

.browser-window .window-content pre[class*="language-"] {
	background: rgba(238, 238, 238, 0.35);
	margin: 0;
}

.terminal-window {
	width:540px;
	height:auto;
	border:0;
	box-shadow:none;
	background-color:transparent;
}
.terminal-window pre[class*="language-"]{
	margin: 0 0 -6px;
}